<template>
    <div>
        <el-form inline>

<el-form-item label="人员名称">
    <el-input v-model="form.realName" filterable clearable></el-input>
</el-form-item>

<!-- <el-form-item label="任务类型" clearable> -->
    <!-- <el-select v-model="form.taskTypeId" filterable clearable> -->
    <!-- <el-option :label="item.typeName" :value="item.id" v-for="item in $store.state.renwulx.leixing"
:key="item.id"> -->
    <!-- {{ form.groupId }} -->
    <!-- <el-cascader v-model="orgs" @change="asdf" :options="options"
        :props="{ label: 'name', value: 'id' }"></el-cascader> -->


    <!-- </el-option> -->
    <!-- </el-select> -->
<!-- </el-form-item> -->
<!-- <el-form-item label="任务类型" clearable>
<el-select v-model="formdata.groupId" filterable clearable>
<el-option :label="item.name" :value="item.id" v-for="item in $store.state.renwulx.zu"
:key="item.id">

</el-option>
</el-select>
</el-form-item> -->


<el-form-item>
    <el-button type="primary" size="mini" @click="getduiyuanxq">搜索</el-button>
</el-form-item>
</el-form>



        <el-table :data="form" border style="width: 100%">
            <el-table-column prop="id" label="编号ID" width="150">
            </el-table-column>
            <el-table-column prop="realName" label="姓名" width="150">
            </el-table-column>

            <el-table-column prop="teamRole" label="站内身份" width="150">
            </el-table-column>
            <el-table-column label="在的组">
                <template slot-scope="scope">
                    <p v-html="scope.row.group.map(item => item.orgName).join('<br>')"></p>

                </template>

            </el-table-column>
            <el-table-column label="组内职务">
                <template v-slot="scope">
                    <!-- v-if="Array.isArray(scope.row.group)" -->
                    <div>
                        <p v-html="scope.row.group.map(item => item.orgRole).join('<br>')"></p>

                    </div>
                    <!-- <div v-else>
                        无组内职务信息      
                    </div> -->
                </template>
            </el-table-column>




            <!-- <el-table-column  width="150">
                <el-row>
                <el-col :span="12">
                    <el-button type="mini"></el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="mini"></el-button>
                </el-col>
            </el-row>
            </el-table-column> -->
            <el-table-column label="操作">
                <template slot-scope="scope">
  <el-button @click="xiugaia(scope.row)">修改</el-button>
                <el-button>详情</el-button>
                </template>
              
            </el-table-column>
   
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formd.page"
            :page-sizes="[10, 20, 30, 40]" :page-size="formd.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="编辑" :visible.sync="chuxianl">
                <xiugai :key="chuxianl" :azhe="id" @done="done"></xiugai>
            </el-dialog>

    </div>
</template>

<script>
import xiugai from '@/views/zhuanyezu/bianji.vue'
import { duiyuanxq, huozhiwu } from '@/api';



export default {
components:{
    
    xiugai
},
    data() {

        return {
            chuxianl: false,
            formd: {

                teamRole: '',

                page: 1,

                pageSize: 10

            },
   id: '',
            form: [],

            zheid: '',
            total: 0

        };

    },

    methods: {
        done(){
this.getduiyuanxq(),
this.chuxianl=false
        },
        xiugaia(id){
            if (id) {
                this.id = id
            }
            console.log(1);
            
this.chuxianl=true
        },
        handleSizeChange(val) {
            this.formd.pageSize = val
            this.getduiyuanxq()
        },
        handleCurrentChange(val) {
            this.formd.page = val
            this.getduiyuanxq()
        },

        async getduiyuanxq() {
            this.formd.teamRole = '预备队员';
            this.formd.realName = this.form.realName;
            let res = await duiyuanxq(this.formd);

            this.zheid = res.data.records.map(obj => obj.id).join(',');
            if (this.zheid) {
                let gres = await huozhiwu({ memberIds: this.zheid });



                console.log(res.data.records, 5555555);

                res.data.records.forEach(item => {
                    gres.data.forEach(ig => {
                        ig['orgName'] = this.$store.state.renwulx.zu.find(i => i.id == ig.orgId).name
                        console.log(item['orgName'], 888);
                    })
                    // console.log(res.data.records,3333);
                    // console.log(this.$store.state.renwulx.zu, 6666);
                    // console.log(item.orgId,888);




                    item['group'] = gres.data.filter(it => it.memberId == item.id);
                    const order = ["队长", "副队长", "组长", "副组长", "正式组员", "预备组员"];
                    item.group.sort((a, b) => order.indexOf(a.orgRole) - order.indexOf(b.orgRole));
                    console.log(item['group'], 9999);

                });

            }
            this.form = res.data.records;
            this.total = res.data.total
        }

    },

    mounted() {

        this.getduiyuanxq();

        // 如果getzhiwu方法是必需的，请在这里定义它或者确保它已经在其他地方被定义

    }

};

</script>









<!-- <script>
import { duiyuanxq, huozhiwu } from '@/api';
export default {
data() {
return {
    formd: {
        teamRole: '',
        page: 1,
        pageSize: 10
    },
    form: {

    },
    gg: [],
    zheid: ''
}
},
methods: {
async getduiyuanxq() {
    this.formd.teamRole = '正式队员';

    let res = await duiyuanxq(this.formd);
    console.log(res, 111);
    this.form = res.data.records;
    console.log(this.form, 99117);

    // 更新 zheid 属性
    this.zheid = this.form.map(obj => obj.id).join(',');
    console.log(this.zheid, 999);
    if (this.zheid) {
        let gres = await huozhiwu({ memberIds: this.zheid }); // 假设 huozhiwu 方法接受一个名为 ids 的参数
        console.log(gres, 88888);
        res.data.records.forEach(item => {
            item['group'] = gres.data.filter(it => it.memberId == item.id)
            let order = ["队长", "副队长", "组长", "副组长", "正式组员", "预备组员"]
            item.group.sort((a, b) => {
                return order.indexOf(a.orgRole) - order.indexOf(b.orgRole)
            })
        }
    
    )
    }
    // 现在可以使用 this.zheid 来调用 huozhiwu 方法

    console.log(res.data.records, 8833311);



}

},
mounted() {
this.getduiyuanxq()

}
}
</script> -->